<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Loader Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Loader</h1>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
            <h3>Functions:</h3>
            <pre><code>GS.addLoader([&lt;LOADER-CLASS-OR-TARGET&gt;[, &lt;LOADER-TEXT&gt;]]);
GS.removeLoader([&lt;LOADER-CLASS-OR-TARGET&gt;]);
GS.removeAllLoaders();</code></pre>
            
            <h3>Description:</h3>
            <p>This function puts a modal spinner with optional text over an element or over the whole document. To remove a loader use the function GS.removeLoader.</p>
            
            <h1>Examples:</h1>
            <div class="doc-example-description">
                <span class="h3">Skeleton Example</span>
                <p>This is an example of a loader that covers the viewport then after an ajax call completes: the loader is removed.</p>
            </div>
            <gs-doc-example>
                <template for="html">
                    <gs-button onclick="testLoader()">Loader</gs-button>
                </template>
                <template for="js">
                    function testLoader() {
                        GS.addLoader('test-loader', 'This is a test loader...');
                        
                        GS.ajaxJSON('/env/action_info', '', function () {
                            GS.removeLoader('test-loader');
                        });
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Targeting an Element Example</span>
                <p>This is an example of a loader covering an element. Notice in the CSS for the target we have the style "position: relative;" this makes the loader to constrain itself to the target, if you were to remove it the loader would cover the whole window.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="18">
                    <gs-button onclick="GS.addLoader(document.getElementById('loader-target'))">Add Loader</gs-button>
                    <gs-button onclick="GS.removeLoader(document.getElementById('loader-target'))">Remove Loader</gs-button>
                    <br />
                    <div id="loader-target" style="position: relative; height: 6em; border: 1px solid #000000;">Loader Target</div>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">GS.removeAllLoaders() Example</span>
                <p>This is an example of a loader covering an element. Notice in the CSS for the target we have the style "position: relative;" this makes the loader to constrain itself to the target, if you were to remove it the loader would cover the whole window.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="20">
                    <gs-button onclick="addLoaders()">Add Loaders</gs-button>
                    
                    <gs-button onclick="GS.removeAllLoaders()">Remove Loaders</gs-button><br />
                    
                    <div id="loader-target1" style="position: relative; height: 6em; border: 1px solid #000000;">Loader Target</div><br />
                    <div id="loader-target2" style="position: relative; height: 6em; border: 1px solid #000000;">Loader Target</div><br />
                    <div id="loader-target3" style="position: relative; height: 6em; border: 1px solid #000000;">Loader Target</div><br />
                    <div id="loader-target4" style="position: relative; height: 6em; border: 1px solid #000000;">Loader Target</div>
                </template>
                <template for="js" height="20">
                    function addLoaders() {
                        GS.addLoader(document.getElementById('loader-target1'), 'Loading1...');
                        GS.addLoader(document.getElementById('loader-target2'), 'Loading2...');
                        GS.addLoader(document.getElementById('loader-target3'), 'Loading3...');
                        GS.addLoader(document.getElementById('loader-target4'), 'Loading4...');
                    }
                </template>
            </gs-doc-example>
        </gs-container>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
</html>